<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>卡片布局案例1</title>
		<style>
			/*css样式思路：
			1.统配选择器：微软雅黑、#f5f5f5 浅灰 外边距至0
			2.#product_card :边框、内边距、外边距、阴影【透明.1】、文字居中
			3.img:边框倒角、内外边距？【微调】
			4.h3:颜色、内外边距？【微调】
			5.p+span:span、内外边距？【微调】、颜色
			
			*/
		   * {
		        font-family:" Microsoft YaHei";
		        background : #f5f5f5;
		        margin: 0;
		    }
			 div{
			        border: 1px solid #ddd;
			        padding: 20px;
			        margin: 10px;
			        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
			        text-align: center;
			        background: #f5f5f5;
					width:150px;
					height:280px;
					border-radius: 10px;
			        }
					
				img {
					border-radius: 10px;
					align: center;
					}
					
				 h3 {
				    color: #333;
					text-align: center;
				}
				p {
				    padding: 2px;
				   
				    color: #ff0000;
					text-align: center;
					font-size: 25px;
				 }
				span {
				   
				    color: #c9d0e0;
					text-align: center;
					font-size: 10px;
				
					margin-left: 1px;
					margin-right: 1px;
				 }
		   
		</style>
	</head>
	<body>
		<!--网页：1.html 结构【原生图分析】-->
		<div id="product card">
		<img src="img/su7.jpg" alt="汽车" width="120" height="180">
		<h3>小米SU7</h3>
		<p>279999</p>
		<span>已有10万+评价</span>
		</div>
	</body>
</html>